<template>
    <el-row :gutter="20">
        <!-- 头像信息区域 -->
        <el-col :span="8">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">头像信息</div>
                </template>
                <div class="text item">
                    <div class="avatar">
                        <el-avatar class="avatar" shape="square" :size="50" :src="avatarURL" />
                    </div>
                    <el-upload ref="uploadRef" class="upload-demo" :limit="1" :action="uploadURL" :headers="headers"
                        :data="uploadData" :auto-upload="false" :on-success="uploadSuccess">
                        <template #trigger>
                            <p><el-button type="primary">选择头像</el-button></p>
                        </template>
                        <div>
                            <el-button type="success" @click="submitUpload">上传头像</el-button>
                        </div>
                        <template #tip>
                            <div class="el-upload_tip">
                                <p>限制上传1个文件，且旧文件会被覆盖</p>
                            </div>
                        </template>
                    </el-upload>
                </div>
            </el-card>
        </el-col>
        <!-- 个人信息区域 -->
        <el-col :span="16">
            <el-card class="box-card">
                <template #header>个人信息</template>
                <div class="change-password-box">
                    <el-form ref="ruleFormRef" status-icon :model="form" :rules="rules" label-width="140px">
                        <el-form-item prop="password" label="修改密码">
                            <el-input type="password" v-model="form.password" />
                        </el-form-item>
                        <el-form-item prop="password2" label="请再次输入密码">
                            <el-input type="password" v-model="form.password2" />
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>
<script setup>
import { ref, reactive } from 'vue'
import defaultAvatarURL from '/images/avatar-default.png'
import useAdmin from '../../stores/admin';
import { changeAdminPassword, changeAdminAvatar, uploadPictureURL } from '../../api';
import useToken from '../../stores/token';
import notification from '../../utils/notification';
import router from '../../router';
const { admin, updateAdmin, removeAdmin } = useAdmin()
const avatarURL = ref(admin.avatar || defaultAvatarURL)
const uploadRef = ref()
const uploadURL = uploadPictureURL()
const { token, removeToken } = useToken()
const headers = { jwt: token }  //请求头部包含tonken
const uploadData = { type: 'admin_avatar' }
//上传成功
const uploadSuccess = async response => {
    const { errno, errmsg, data } = response
    if (errno !== 0) {
        notification({ tyep: 'error', message: errmsg })
    } else {
        if (errmsg !== '') {
            notification({ type: 'success', message: errmsg })
        }
        await changeAdminAvatar({ avatar: data.savepath })
        console.log(data.url);
        updateAdmin({ avatar: data.url })
        avatarURL.value = data.url
    }
    uploadRef.value.clearFiles()
}
const submitUpload = () => {
    uploadRef.value.submit()
}
const ruleFormRef = ref()
const form = reactive({
    password: '',
    password2: ''
})
//修改密码
const submitForm = formEl => {
    formEl.validate(async valid => {
        if (valid) {
            await changeAdminPassword({ password: form.password })
            resetForm()
            //退出登录
            removeToken()
            removeAdmin()
            router.push({ name: 'login' })
            notification({ type: 'warning', message: '修改密码后，请重新登录' })
        } else {
            notification({ type: 'error', message: '表单填写有误' })
        }
    })
}
const resetForm = () => {
    ruleFormRef.value.resetFields()
}
const validatePass = (rule, value, callback) => {
    if (value !== form.password) {
        callback(new Error('两次输入的密码不一致！'))
    } else {
        callback()
    }
}
const rules = reactive({
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 24, message: '密码长度为6-24个字符', trigger: 'blur' }
    ],
    password2: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { validator: validatePass, trigger: 'blur' }
    ]
})
</script>
<style lang="scss" scoped>
.avatar {
    text-align: center;
}

.upload-demo {
    text-align: center;
    .el-upload_tip{
        font-size: 12px;
    }
}

.box-card {
    height: 316px;
}

.change-password-box {
    padding-top: 36px;
}
</style>